
var canvas,
  context,
  canvasWidth = 490,
  canvasHeight = 220,
  images = {},
  frameInterval,
  fps = 30,
  drawing = false,
  fpsInterval,
  numFramesDrawn = 0,
  curFPS = 0,
  level = 1,
  maxLevel = 6,
  speed = 15,
  curLoadResNum = 0,
  totalLoadResources = 1,
  displayList = [],
  ball,
  hero,
  background;
  

Ball = function() {

 

  var x = 0,

  y = 0,

  speed = 0, 

  direction = 1, 

  rollTimer, 

  dirty = false, 

  diameter = 20, 

  color = "#DD3333",

  highlightColor = "#fa6565";

 

  rollTimer = setInterval(updateRoll, 1000/25);

 

  function roll(pSpeed, pDirection){

  speed = pSpeed;

  if(pDirection){

  direction = pDirection;

  }

 

  }

  function stop() {

  speed = 0;

  }

  function updateRoll() {

  x += direction * speed;

  }

  function draw(context) {

 

  var centerX = x,

  centerY = y + (diameter + 10)/2 - 2,

  width = (diameter + 30),

  height = 6;

 

  context.beginPath();

  context.moveTo(centerX, centerY);

  context.bezierCurveTo(centerX-width/2,centerY-height/2,

   centerX-width/2,centerY+height/2,

   centerX,centerY+height/2);

  context.bezierCurveTo(centerX+width/2,centerY+height/2,

   centerX+width/2,centerY-height/2,

   centerX,centerY-height/2);

  context.fillStyle = "#000000";

  context.fill();

  context.closePath();

 

  context.beginPath();

  context.moveTo(x, y - (diameter + 10)/2);

  context.arc(x,y,(diameter + 10)/2,0,2*Math.PI,false);

  context.fillStyle = "#000000";

  context.fill();

  context.closePath();

 

  context.beginPath();

  context.moveTo(x, y - diameter/2);

  context.arc(x,y,diameter/2,0,2*Math.PI,false);

  context.fillStyle = color;

  context.fill();

  context.closePath();

 

  centerX = x + 3;

  centerY = y - 3;

  context.beginPath();

  context.moveTo(centerX, centerY);

  context.arc(centerX,centerY,diameter/3/2,0,2*Math.PI,false);

  context.fillStyle = highlightColor;

  context.fill();

  context.closePath();

  }

  function getX(){

  return x; 

  }

  function setX(pX){

  x = pX; 

  }

  function getY(){

  return y; 

  }

  function setY(pY){

  y = pY; 

  }

  return {

  getX:getX,

  setX:setX,

  getY:getY,

  setY:setY,

  roll:roll,

  draw:draw,

  stop:stop

  };

  };

 

 function throwBall() { 

  ball.roll(speed, -1);

}




function start() {

  frameInterval = setInterval(update, 1000/fps);

  fpsInterval = setInterval(updateFPS, 1000);

}




function prepareCanvas(gameDiv, pCanvasWidth, pCanvasHeight) {

 

  canvasWidth = pCanvasWidth;

  canvasHeight = pCanvasHeight;

 

  // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)

  canvas = document.createElement('canvas');

  canvas.setAttribute('width', canvasWidth);

  canvas.setAttribute('height', canvasHeight);

  canvas.setAttribute('id', 'canvas');

  gameDiv.appendChild(canvas);

 

  /*if(typeof G_vmlCanvasManager != 'undefined') {

  canvas = G_vmlCanvasManager.initElement(canvas);

  }*/

  context = canvas.getContext("2d"); // Grab the 2d canvas context

  // Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:

  //     context = document.getElementById('canvas').getContext("2d");




  start();




  ball = new Ball();

  ball.setX(canvasWidth);

  ball.setY(200);

  ball.roll(speed, -1);

  displayList.push(ball);

}




function clearCanvas() {

  canvas.width = canvas.width; // clears the canvas 

}




function update() {

 

  ++numFramesDrawn;




  if(ball.getX() < 0) {

 

  speed = Math.random()*100;

  level += 1;




  ball.stop();

  ball.setX(canvasWidth + 20);

  setTimeout(throwBall, Math.random() * 3000);

  } 

  else {

  ball.roll(speed, -1);

  }

  redraw(); 

 }




function redraw() {

 

  var i;

 

  clearCanvas();

 

  for(i = 0; i < displayList.length; i++)

  {

  displayList[i].draw(context); 

  }

 

  try {

 

  } catch (ex) {

 

  }

 

 }

function updateFPS()

{

  curFPS = numFramesDrawn;

  numFramesDrawn = 0;

}